<template>
  <Card :bordered="false" dis-hover>
    <Button
      type="primary"
      class="ivu-mb-16"
      @click="handleAdd"
      v-hasC="{
        name: 'v1-project-list-add',
        flag: 'v1/project/list/add',
      }"
      >新增</Button
    >
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      v-hasC="{
        name: 'v1-project-list-list',
        flag: 'v1/project/list/list',
      }"
    >
      <template #status="{ row }">
        <Badge v-if="row.status == 0" status="warning" text="停用" />
        <Badge v-else status="processing" text="正常" />
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-project-list-edit',
            flag: 'v1/project/list/edit',
          }"
          >编辑</a
        >
        <Divider type="vertical"></Divider>
        <a
          @click="handleManager(row)"
          v-hasC="{
            name: 'v1-project-list-set',
            flag: 'v1/project/list/set',
          }"
          >设置管理员</a
        >
      </template>
    </Table>
    <Page
      :total="total"
      class="ivu-mt-16"
      v-model="params.page"
      :page-size="params.pageSize"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
      v-hasC="{
        name: 'v1-project-list-list',
        flag: 'v1/project/list/list',
      }"
    />
    <Modal
      :title="add ? '新增' : '编辑'"
      width="600"
      v-model="articleModal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
    >
      <Form :label-width="80" :model="formData" ref="formItem" :rules="rules">
        <FormItem label="项目名称" prop="name">
          <Input placeholder="请输入项目名称" v-model="formData.name" />
        </FormItem>
        <FormItem label="排序" prop="sort" class="ivu-inline-block">
          <InputNumber :precision="0" :min="1" v-model="formData.sort" />
        </FormItem>

        <FormItem label="状态" prop="status">
          <Switch v-model="formData.status" />
        </FormItem>
      </Form>
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button
          :loading="subloading"
          type="primary"
          @click="sendData"
          class="ivu-ml-16"
          >确定</Button
        >
      </div>
    </Modal>

    <Modal
      title="设置项目管理员"
      width="600"
      v-model="MModal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
    >
      <Form :label-width="80" :model="formData2" ref="formItem2" :rules="rules2">
        <FormItem label="管理员" prop="member_id">
            <Select v-model="formData2.member_id" multiple placeholder="请选择项目管理员">
                <Option v-for="item in managerList" :value="item.member_id" :key="item.member_id">{{ item.realname }}</Option>
            </Select>
        </FormItem>
      </Form>
      <div slot="footer" class="modalFoot">
        <Button @click="MModal=false">取消</Button>
        <Button
          :loading="subloading2"
          type="primary"
          @click="sendManager"
          class="ivu-ml-16"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import { projectList,createProject,updateProject ,getMemberList,updateProjectLeader} from "@/api/jzy";
export default {
  name: "videotype",
  data() {
    return {
      add: true,
      total: 0,
      articleModal: false,
      MModal:false,
      subloading: false,
      subloading2:false,
      params: {
        page:1,
        pageSize: 10
      },
      formData: {
        name: "",
        sort: 1,
        status: true,
      },
      formData2:{
          member_id:''
      },
      rules: {
        name: [
          { required: true, message: "请输入类型名称", trigger: "bulr" }
        ]
      },
      rules2:{
        member_id: [
          { required: true, message: "请选择项目管理员", trigger: "change",type:"array"},
        ]
      },
      columns: [
        {
          title: "ID",
          key: "id",
        },
        {
          title: "项目名称",
          key: "name",
        },
        {
          title: "项目管理员",
          key: "realname",
          tooltip:true
        },
        {
          title: "排序",
          key: "sort",
        },
        {
          title: "状态",
          slot: "status",
        },
        {
          title: "创建时间",
          key: "created_at",
          width:160
        },
        {
          title: "操作",
          slot: "action",
          width:160
        },
      ],
      list: [],
      loading: false,
      managerList:[]
    };
  },
  methods: {
    askData() {
      this.params.page = 1;
      this.getData();
    },
    getData() {
      const params = this.params;
      this.loading = true;
      projectList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sendData() {      
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
            this.subloading=true
            let params={...this.formData}
            params.status=params.status?'1':'0'
            if(!this.add&&params.id!=''){
                updateProject(params).then(res=>{
                    this.articleModal = false;
                    this.getData();
                })
                .finally(() => {
                    this.subloading = false;
                });
            }else{
                createProject(params).then(res=>{
                    this.articleModal = false;
                    this.getData();
                })
                .finally(() => {
                    this.subloading = false;
                });
            }
            
        }
      });
    },
    sendManager(){
        this.$refs["formItem2"].validate((valid) => {
            if (valid) {
                this.subloading2 = true;
                updateProjectLeader(this.formData2).then(res=>{
                    this.MModal = false;
                    this.subloading2 = false;
                    this.getData();
                }).finally(() => {
                    this.subloading2 = false;
                });
            }
        })
        
    },
    canceledit() {
      this.articleModal = false;
    },
    formSize(e) {
      this.params.page = e;
      this.getData();
    },
    formChangePage(e) {
      this.params.pageSize = e;
      this.askData();
    },
    handleAdd() {
      this.add = true;
      this.articleModal = true;
      this.$refs['formItem'].resetFields() 
      this.formData= {
        name: '',
        sort:1,
        status:true,
      }     
    },
    handleEdit(row) {
      this.add = false;
      this.articleModal = true;
      this.$refs['formItem'].resetFields()
      this.formData= {
        id:row.id,
        name: row.name,
        sort: +row.sort,
        status: +row.status?true:false,
      }
    },
    handleManager(row){
        this.MModal = true;
        this.$refs['formItem2'].resetFields()
        getMemberList({project_id:row.id}).then(res=>{
            this.managerList=res
            let memberIds=[]
            res.forEach(element => {
                if(element.is_project_leader==1){
                    memberIds.push(element.member_id)
                }
            });
            this.formData2= {
                project_id:row.id,
                member_id:[...memberIds]
            }
        })
        
    }
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang='less' scoped>
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
